@import '@/style/public.scss';

.titleBlock {
  width: 100%;
  height: 40px;
  @include flex(space-between, center);
  .btnBox{
    height: 40px;
  };
  .closeBtn:hover{
    background-color: red;
    color: #fff
  }
  .otherBtn:hover{
    background-color: lightgray;
  }
  .titleBlockLeft{
    font-size: 12px;
    color: #373737;
    margin-left: 18px;
  }

  .n-popover{
    padding: 0;
  }
}

// 调整尺寸窗口
.winBox {
  width: 342px;
  height: 164px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, 5fr);
  grid-gap: 12px;

  &>div {
    border-radius: 5px;
    overflow: hidden;
    display: grid;
    grid-gap: 4px;

    div {
      background: #f3f3f3;
      border: 1px solid #d3dfe9;

      &:hover {
        background: #0067c0;
      }
    }
  }
  .item1 {
    grid-template-columns: repeat(2, 5fr);
  }
  
  .item2 {
    grid-template-columns: 6fr 4fr;
  }
  
  .item3 {
    grid-template-columns: repeat(3, 3.3fr);
  }
  
  .item4 {
    grid-template-columns: repeat(2, 5fr);
    grid-template-rows: repeat(2, 5fr);
    grid-template-areas:
      "header left"
      "header right";
  
    .item4A {
      grid-area: header;
    }
  }
  
  .item5 {
    grid-template-columns: repeat(2, 5fr);
    grid-template-rows: repeat(2, 5fr);
    grid-template-areas:
      "header left"
      "header right";
  }
  
  .item6 {
    grid-template-columns: 2.5fr 5fr 2.5fr;
  }
}